<template>
  <div class="hello">
    <ul>
      <li v-for="(item, index) in list" :key="index" class="imgbox">
        <img :src="item.url" alt="" srcset="">
        <span>{{item.title}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      list: [
        {
          title: 'aaa',
          url: "../assets/img/aaa.png"
        },
        {
          title: 'bbb',
          url: "../assets/img/bbb.png"
        },
        {
          title: 'ccc',
          url: "../assets/img/ccc.png"
        },
        {
          title: 'ddd',
          url: "../assets/img/eee.png"
        },
        {
          title: 'fff',
          url: "../assets/img/fff.png"
        },
        {
          title: 'eee',
          url: "../assets/img/eee.png"
        },
      ]
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul{
  display: flex;
}
.imgbox{
  width: 100px;
  height: 120px;
}
.imgbox img{
  width: 100px;
  height: 100px;
}

</style>
